<template>
  <el-menu
    :uniqueOpened="true"
    :default-active="defaultRouter"
    class="el-menu-vertical-demo"
    @select="handleSelect"
    background-color="#406493"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <template v-for="(item, index) in menuList" :key="index">
      <template v-if="item.children">
        <!-- <el-menu-item-group>
          <el-icon><School/></el-icon>
          <template #title>分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
        </el-menu-item-group> -->
      </template>
      <template v-else>
        <el-menu-item :index="item.route">
          <el-icon>
            <img style="width: 30px; height: 30px" :src="item.icon" alt="" />
          </el-icon>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script setup>
import { School } from "@element-plus/icons-vue";
import { ref, computed, onMounted, watch } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const menuList = JSON.parse(localStorage.getItem("menuList"));
const defaultRouter = ref("/colleges");
// console.log(menuList, 'menuList');
function handleSelect(index, keyPath) {
  defaultRouter.value = index;
  router.push(index);
}
onMounted(() => {
  defaultRouter.value = route.path;
});
//登录后，有新消息的话会跳转到文书检测页，监听路由变化，设置默认菜单项
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log("newValue:" + newValue);
    defaultRouter.value = newValue;
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.el-menu {
  border-right: none;
}
</style>
